<template>
	<div>
		<div class="box">
			<div class="items" v-for=" (v,i) in list" :key="i">
				<div class="herder flex align-items justify-content-between">
					<div>{{i+1}}</div>
					<div class="icon" v-if="type ==1">
						<image src="/static/copy.png" @click="copy(i)"></image>
						<image src="/static/img/index/delete.png" @click="dele(i)"></image>
					</div>
					<div class="types" v-if="type == 3" @click="jumpTo('/pages/supervise/processingRecords')">
						处理记录
					</div>
				</div>
				<view class="item flex align-items ">
					<view class="item_left">责任部门：</view>
					<view class="item_right  flex align-items" @click="templateBtn('deptStr',i)">
						<u-input v-model="v.deptStr" placeholder="请选择" :fontSize="16" :readonly="true"
							placeholderClass="placeholderClass" style="pointer-events:none"></u-input>
					</view>
				</view>
				<view class="item flex align-items ">
					<view class="item_left">责任人：</view>
					<view class="item_right  flex align-items" @click="templateBtn('onusUserStr',i)">
						<u-input v-model="v.onusUserStr" placeholder="请选择" :fontSize="16" :readonly="true"
							placeholderClass="placeholderClass" style="pointer-events:none"></u-input>
					</view>
				</view>
				<view class="item flex align-items ">
					<view class="item_left">工作内容：</view>
					<view class="item_right  flex align-items">
						<u--textarea v-model="v.workContent" :fontSize="16" :disabled="type ==2" placeholder="请输入内容"
							autoHeight></u--textarea>
					</view>
				</view>
				<view class="item flex align-items ">
					<view class="item_left">开始时间：</view>
					<view class="item_right  flex align-items" @click="templateBtn('startDate',i)">
						<u-input v-model="v.startDate" placeholder="请选择" :fontSize="16" :readonly="true"
							placeholderClass="placeholderClass" style="pointer-events:none"></u-input>
					</view>
				</view>
				<view class="item flex align-items ">
					<view class="item_left">结束时间：</view>
					<view class="item_right  flex align-items" @click="templateBtn('endDate',i)">
						<u-input v-model="v.endDate" placeholder="请选择" :fontSize="16" :readonly="true"
							placeholderClass="placeholderClass" style="pointer-events:none"></u-input>
					</view>
				</view>
			</div>

			<div class="add" @click="add" v-if="type ==1">添加</div>
		</div>
		<u-button class="btn" @click="comit()" :loading="loading" loadingText="提交中" v-if="type ==1">提交</u-button>
		<u-datetime-picker :show="show" v-model="value1" mode="date" @confirm="confirm" :maxDate="maxDate"
			:minDate="minDate" @cancel="show  =false"></u-datetime-picker>
		<tree ref="tree" @comit="treeComit" :treeData="treeData" :type="treeType"></tree>
	</div>
</template>

<script>
	import {
		getListDeptForZTree,
		sysUserList,
		getOperateUser
	} from '@/api/lssue.js'
	import {
		handleDecompose
	} from '@/api/supervise.js'
	export default {
		data() {
			return {
				list: [],
				form: {
					startDate: '',
					endDate: '',
					workContent: '',
					onusUser: '',
					deptId: '',
					deptStr: '',
					onusUserStr: ''
				},
				show: false,
				value1: Number(new Date()),

				loading: false,
				type: 1, // type等于1的话就是输入 type等于其他就是展示
				treeData: [],
				treeDataTwo: [],
				treeType: 0,
				key: '',
				idx: Number,
				treeDataUser: [],
				maxDate: null,
				minDate: null,
				id: null,
				login_user_id:''
			}
		},
		onLoad(option) {
			console.log(option, "option");
			this.type = option.type || 1
			this.id = option.id || null
			this._getListDeptForZTree()
			this._getOperateUser()
			if (option.startDate) {
				this.maxDate = new Date(option.endDate).getTime()
				this.minDate = new Date(option.startDate).getTime()
			}
			if (uni.getStorageSync('list')) {
				this.list = JSON.parse(uni.getStorageSync('list'))
			}
		},
		methods: {
			// 获取当前登录人信息
			async _getOperateUser() {
				const res = await getOperateUser()
				console.log(res, "getuser");
				const userInfo = res.datas
				this.login_user_id = userInfo.login_user_id
			},
			// 提交
			comit() {
				if (!this.checkArrayObjectsNoEmptyValues(this.list)) return uni.$u.toast('请将数据填写完整')
				if (this.id) {
					handleDecompose({
						id: this.id,
						listVo: this.list
					}).then(res => {
						console.log(res);
						uni.$u.toast('操作成功')
						uni.$emit('back')
						uni.navigateBack()
					})
				} else {
					uni.$emit('list', this.list)
					uni.navigateBack()
				}

			},
			// 检查数组对象里是否有空值
			checkArrayObjectsNoEmptyValues(arr) {
				return arr.every(obj => {
					// 检查对象中每个属性的值是否为 null、undefined 或空字符串
					return Object.values(obj).every(value => value !== null && value !== undefined && value !==
						'');
				});
			},
			async templateBtn(key, idx) {
				if (this.type == 2) return
				this.idx = idx
				this.key = key
				if (key == 'deptStr') {
					this.treeData = this.treeDataTwo
					this.$refs.tree.itemclick(false, true)
				} else if (key == 'onusUserStr') {
					if (!this.list[this.idx].deptId) return uni.$u.toast('请先选择部门')
					this.getSysUserList(this.list[this.idx].deptId)
				} else {
					this.show = true
				}
			},
			treeComit(val) {
				console.log(val);
				console.log(this.key);
				if (this.key == 'onusUserStr' && this.login_user_id == val[0].id) {
				    return uni.$u.toast('不能选择自己');
				}
				const keyMapping = {
					deptStr: 'deptId',
					onusUserStr: 'onusUser',
				};
				// 判断 key 是否存在于映射关系中
				if (keyMapping[this.key]) {
					const labelKey = this.key;
					const valueKey = keyMapping[this.key];
					if (this.list[this.idx][valueKey] != val[0].id && this.key == 'deptStr') {
						this.list[this.idx].onusUser = ''
						this.list[this.idx].onusUserStr = ''
					}
					this.list[this.idx][labelKey] = val[0].label;
					this.list[this.idx][valueKey] = val[0].id;
				}
			},
			getSysUserList(DEPT_ID) {
				sysUserList({
					PAGE_NO: 1,
					PAGE_SIZE: 10000,
					DEPT_ID: DEPT_ID,
					DEPT: DEPT_ID,
				}).then(res => {
					this.treeDataUser = JSON.parse(res.datas).rows.map(v => {
						return {
							label: v.user_name,
							id: v.user_id,
							checked: false,
						}
					})
					this.treeData = this.treeDataUser
					this.$refs.tree.itemclick(false, true)
				})
			},
			_getListDeptForZTree() {
				getListDeptForZTree().then((res) => {
					console.log(res);
					// this.treeData = res.datas.map(ele => this.treeStructure(ele));
					this.treeDataTwo = res.datas.map(ele => this.treeStructure(ele));
					console.log(this.treeData, "treeData");
				});
			},
			treeStructure(ele) {
				const haveChildren = Array.isArray(ele.children) && ele.children.length > 0;
				return {
					id: ele.value,
					label: ele.label,
					checked: false,
					children: haveChildren ? ele.children.map(i => this.treeStructure(i)) : [],
				}
			},
			dele(idx) {
				this.list.splice(idx, 1)
			},
			copy(idx) {
				const row = {
					...this.list[idx]
				}
				this.list.push(row)
			},
			add() {
				this.list.push({
					...this.form
				})
			},
			// templateBtn() {
			// 	console.log();
			// 	this.show = true
			// },
			confirm(val) {
				console.log(val);
				console.log(this.list[this.idx][this.key]);
				this.list[this.idx][this.key] = this.$changeDate(val.value)
				const endDate = this.list[this.idx].endDate
				const startDate = this.list[this.idx].startDate
				if (this.key == 'startDate' && endDate) {
					if (this.compareTimes(startDate, endDate, '0')) {
						this.list[this.idx].startDate = ''
						return uni.$u.toast('开始时间不能大于结束时间')
					}
				}
				if (this.key == 'endDate' && startDate) {
					if (this.compareTimes(startDate, endDate, '0')) {
						this.list[this.idx].endDate = ''
						return uni.$u.toast('结束时间不能小于开始时间')
					}
				}
				this.show = false
			},
			compareTimes(startTime, endTime, comparisonType) {
				console.log(startTime);
				console.log(endTime);
				// 将输入的日期字符串转换为 Date 对象
				const start = new Date(startTime)
				const end = new Date(endTime)
				console.log(start);
				console.log(end);
				// 检查日期是否有效
				if (isNaN(start) || isNaN(end)) {
					throw new Error('无效的日期格式')
				}
				// 根据比较类型返回结果
				switch (comparisonType) {
					case '0':
						return start > end // 如果开始时间大于结束时间
					case '1':
						return start < end // 如果开始时间小于结束时间
					case '2':
						return start.getTime() === end.getTime() // 如果开始时间等于结束时间
					default:
						throw new Error('无效的比较类型，请使用“大于”、“小于”或“等于”')
				}
			},
		}
	}
</script>
<style>
	page {
		background-color: #F6F6F6;
	}
</style>
<style lang="scss" scoped>
	.types {
		padding: 6rpx 10rpx;
		border: 1rpx solid #267DFF;
		color: #267DFF;
		border-radius: 8rpx;
		font-size: 24rpx;
	}

	.items {
		background-color: #FFF;
		margin-top: 10rpx;
	}

	.herder {
		border-bottom: 1rpx solid #E6E6E6;
		padding: 0 31rpx;
		height: 60rpx;
		padding-top: 10rpx;

		.icon {
			image {
				width: 36rpx;
				height: 36rpx;
				margin-left: 10rpx;
			}
		}
	}

	.item {
		min-height: 100rpx;
		border-bottom: 1rpx solid #E6E6E6;
		padding: 0 31rpx;

		&_left {
			// width: 220rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 33rpx;
			line-height: 47rpx;
			text-align: left;
			font-style: normal;
			color: #666666;
		}

		&_left::before {
			content: '*';
			color: #FF0000;
		}

		&_right {
			flex: 1;
			border: 1rpx solid #E6E6E6;
			border-radius: 4rpx;

			/deep/.u-input {
				height: 65rpx;
				margin: 0 auto;
				font-size: 16rpx;
			}
		}

		&_fu {
			width: 196rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 33rpx;
			line-height: 47rpx;
			text-align: left;
			font-style: normal;
			color: #666666;
		}

		&_upload {
			width: 240rpx;
			height: 60rpx;
			background: #267DFF;
			text-align: center;
			line-height: 60rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 29rpx;
			color: #FFFFFF;
		}

	}

	.add {
		width: 280rpx;
		height: 80rpx;
		margin: 0 auto;
		margin-top: 50rpx;
		border: 1rpx solid #267DFF;
		border-radius: 8rpx;
		line-height: 78rpx;
		color: #267DFF;
		text-align: center;
	}

	.btn {
		background: #267DFF;
		width: 100%;
		height: 89rpx;
		text-align: center;
		line-height: 89rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 29rpx;
		color: #FFFFFF;
		margin: 0 auto;
		margin-top: 30rpx;
	}

	/deep/ .u-textarea--disabled {
		background-color: #FFF !important;

	}

	/deep/ .uni-textarea-textarea {
		color: black !important;
		font-size: 16px;
	}
</style>